<template>
  <div class="profile-container">
    <el-row :gutter="20">
      <!-- 左侧用户信息卡片 -->
      <el-col :span="8">
        <el-card class="user-card">
          <div class="user-avatar">
            <el-avatar :size="100" :src="userInfo.avatar">
              {{ userInfo.nickname?.charAt(0) }}
            </el-avatar>
          </div>
          <div class="user-info">
            <h2>{{ userInfo.nickname }}</h2>
            <p class="user-id">ID: {{ userInfo.id }}</p>
          </div>
          <div class="balance-info">
            <div class="balance-item">
              <div class="balance-label">账户余额</div>
              <div class="balance-value">
                ¥{{ userInfo.balance.toFixed(2) }}
              </div>
              <el-button
                type="primary"
                size="small"
                @click="showRechargeDialog"
              >
                充值
              </el-button>
            </div>
            <div class="balance-item">
              <div class="balance-label">积分</div>
              <div class="balance-value">{{ userInfo.points }}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧内容区 -->
      <el-col :span="16">
        <el-tabs v-model="activeTab" class="profile-tabs">
          <!-- 基本信息 -->
          <el-tab-pane label="基本信息" name="basic">
            <el-form
              ref="basicFormRef"
              :model="basicForm"
              :rules="basicRules"
              label-width="100px"
            >
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="basicForm.nickname" />
              </el-form-item>
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="basicForm.phone" />
              </el-form-item>
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="basicForm.email" />
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="basicForm.gender">
                  <el-radio label="male">男</el-radio>
                  <el-radio label="female">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updateBasicInfo">
                  保存修改
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 修改密码 -->
          <el-tab-pane label="修改密码" name="password">
            <el-form
              ref="passwordFormRef"
              :model="passwordForm"
              :rules="passwordRules"
              label-width="100px"
            >
              <el-form-item label="当前密码" prop="currentPassword">
                <el-input
                  v-model="passwordForm.currentPassword"
                  type="password"
                  show-password
                />
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword">
                <el-input
                  v-model="passwordForm.newPassword"
                  type="password"
                  show-password
                />
              </el-form-item>
              <el-form-item label="确认新密码" prop="confirmPassword">
                <el-input
                  v-model="passwordForm.confirmPassword"
                  type="password"
                  show-password
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updatePassword">
                  修改密码
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 实名认证 -->
          <el-tab-pane label="实名认证" name="verify">
            <div class="verify-status" v-if="userInfo.verified">
              <el-result
                icon="success"
                title="已完成实名认证"
                sub-title="认证信息仅用于平台验证，我们会严格保护您的个人隐私"
              >
                <template #extra>
                  <div class="verify-info">
                    <p>姓名：{{ userInfo.realName }}</p>
                    <p>身份证号：{{ maskIdCard(userInfo.idCard) }}</p>
                  </div>
                </template>
              </el-result>
            </div>
            <el-form
              v-else
              ref="verifyFormRef"
              :model="verifyForm"
              :rules="verifyRules"
              label-width="100px"
            >
              <el-form-item label="真实姓名" prop="realName">
                <el-input v-model="verifyForm.realName" />
              </el-form-item>
              <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="verifyForm.idCard" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitVerify">
                  提交认证
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <!-- 充值对话框 -->
    <el-dialog v-model="rechargeVisible" title="账户充值" width="400px">
      <el-form :model="rechargeForm" label-width="80px">
        <el-form-item label="充值金额">
          <el-input-number
            v-model="rechargeForm.amount"
            :min="1"
            :max="10000"
            :precision="2"
          />
        </el-form-item>
        <el-form-item label="支付方式">
          <el-radio-group v-model="rechargeForm.method">
            <el-radio label="wechat">微信支付</el-radio>
            <el-radio label="alipay">支付宝</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="rechargeVisible = false">取消</el-button>
          <el-button type="primary" @click="handleRecharge">
            确认充值
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";

// 用户信息
const userInfo = reactive({
  id: "10086",
  nickname: "测试用户",
  avatar: "",
  phone: "13800138000",
  email: "test@example.com",
  gender: "male",
  balance: 1000.0,
  points: 500,
  verified: false,
  realName: "",
  idCard: "",
});

// 当前激活的标签页
const activeTab = ref("basic");

// 基本信息表单
const basicFormRef = ref();
const basicForm = reactive({
  nickname: userInfo.nickname,
  phone: userInfo.phone,
  email: userInfo.email,
  gender: userInfo.gender,
});

// 基本信息验证规则
const basicRules = {
  nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入手机号码", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
  ],
};

// 密码表单
const passwordFormRef = ref();
const passwordForm = reactive({
  currentPassword: "",
  newPassword: "",
  confirmPassword: "",
});

// 密码验证规则
const passwordRules = {
  currentPassword: [
    { required: true, message: "请输入当前密码", trigger: "blur" },
  ],
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, message: "密码长度不能小于6位", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "请确认新密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};

// 实名认证表单
const verifyFormRef = ref();
const verifyForm = reactive({
  realName: "",
  idCard: "",
});

// 实名认证验证规则
const verifyRules = {
  realName: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
  idCard: [
    { required: true, message: "请输入身份证号", trigger: "blur" },
    {
      pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
      message: "请输入正确的身份证号",
      trigger: "blur",
    },
  ],
};

// 充值相关
const rechargeVisible = ref(false);
const rechargeForm = reactive({
  amount: 100,
  method: "wechat",
});

// 显示充值对话框
const showRechargeDialog = () => {
  rechargeVisible.value = true;
};

// 处理充值
const handleRecharge = () => {
  if (!rechargeForm.amount || !rechargeForm.method) {
    ElMessage.warning("请填写完整的充值信息");
    return;
  }
  // 模拟充值成功
  setTimeout(() => {
    userInfo.balance += rechargeForm.amount;
    rechargeVisible.value = false;
    ElMessage.success("充值成功");
  }, 1000);
};

// 更新基本信息
const updateBasicInfo = () => {
  basicFormRef.value.validate((valid) => {
    if (valid) {
      // 模拟更新成功
      Object.assign(userInfo, basicForm);
      ElMessage.success("信息更新成功");
    }
  });
};

// 更新密码
const updatePassword = () => {
  passwordFormRef.value.validate((valid) => {
    if (valid) {
      // 模拟更新密码
      ElMessage.success("密码修改成功，请重新登录");
      passwordForm.currentPassword = "";
      passwordForm.newPassword = "";
      passwordForm.confirmPassword = "";
    }
  });
};

// 提交实名认证
const submitVerify = () => {
  verifyFormRef.value.validate((valid) => {
    if (valid) {
      // 模拟认证成功
      userInfo.verified = true;
      userInfo.realName = verifyForm.realName;
      userInfo.idCard = verifyForm.idCard;
      ElMessage.success("实名认证成功");
    }
  });
};

// 身份证号码脱敏显示
const maskIdCard = (idCard) => {
  if (!idCard) return "";
  return idCard.replace(/^(.{6})(?:\d+)(.{4})$/, "$1********$2");
};
</script>

<style scoped>
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.user-card {
  text-align: center;
  padding: 20px;
}

.user-avatar {
  margin-bottom: 20px;
}

.user-info {
  margin-bottom: 30px;
}

.user-id {
  color: #999;
  margin-top: 5px;
}

.balance-info {
  text-align: left;
  padding: 20px 0;
  border-top: 1px solid #eee;
}

.balance-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.balance-label {
  width: 80px;
  color: #666;
}

.balance-value {
  flex: 1;
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
  margin: 0 15px;
}

.profile-tabs {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
}

.verify-status {
  padding: 20px 0;
}

.verify-info {
  text-align: center;
  color: #666;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}

:deep(.el-form-item:last-child) {
  margin-bottom: 0;
}
</style> 